<template>
  <div class="Menu-container">
   <router-link :exact="item.exact" v-for="item in value" :key="item.name" :to="{name:item.name}" class="item"     active-class='selected'><!--改变激活类名 命名路由，解除与路径的耦合关系-->
    <icon  class="iconfont" :classty="item.icon"></icon>
    <span>{{item.text}}</span>
   </router-link>
  </div>
</template>

<script>
import icon from '../Icon/index.vue';
export default {
  data(){
    return {
      value:[{
        name:'main',
        text:'首页',
        icon:'zhuye',
        exact:true,//改变匹配规则
      },
      {
        name:'blog',
        text:'文章',
        icon:'blog',
        startwith:true,//防止跳转后样式消失
        exact:false,
      },
      {
        name:'about',
        text:'关于我',
        icon:'about',
        exact:true,
      },
      {
        name:'project',
        text:'项目&效果',
        icon:'code',
        exact:true,
      },
      {
        name:'message',
        text:'留言板',
        icon:'liuyan',
        exact:true,
      }]
    }
  },
  components:{
    icon,
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/var.less';
@import '~@/style/global.less';
.Menu-container{
    background-color: transparent;
    color:@gray;
    width: 100%;
    font-size: 12px;
    .item{
      display: block;
      height: 30px;
      line-height: 30px;
      padding-left:40px;
      cursor: pointer;
      &:hover{
        color: #fff;
      }
      &.selected{
        background-color: #2d2d2d;
      }
    }
    span{
      margin-left:10px;
    }
}
</style>